<script  lang="ts" setup="">

import {onMounted, ref} from "vue";
import {
  askToAi,
  getComment,
  getQuestionById,
  searchSubmitRes,
  submitQuestion
} from "@/request/request";
import message from "@arco-design/web-vue/es/message";
import MdViewer from "@/components/MdViewer.vue";
import CodeEditor from "@/components/CodeEditor.vue";
import {useRoute} from "vue-router";
import {useUserStore} from "@/stores/user";

const userStore = useUserStore()
const route = useRoute()
interface Props {
  id: string
}
const questionId = route.params.id
const show = ref(false)
const props = withDefaults(defineProps<Props>(), {
  id: () => ''
})
// 加载效果
const loading = ref(true)
const question = ref({})
const loadData = async () => {
  const res = await getQuestionById(props.id)
  if (res.data.code === 0){
    question.value = res.data.data
  }else {
    message.error('加载失败' + res.data.message)
  }
}
const form = ref({
  language: 'java',
  code: '',
  questionId: questionId
})
const searchSubmitForm = ref({
  language: form.value.language,
  questionId: questionId,
  status: '',
  userId: userStore.userId
})
/**
 * 提交代码
 */
const doSubmit = async () => {
  const res = await submitQuestion(form.value)
  if (res.data.code === 0){
    message.success('提交成功，请等待执行结果')
    show.value = true

  }else {
    message.error('提交失败'+ res.data.message)
  }
}

// 题目提交结果表格列
const colums = [
  {
    title: 'id',
    dataIndex: 'id',
  },
  {
    title: '提交代码',
    dataIndex: 'code',
  },
  {
    title: '编程语言',
    dataIndex: 'language',
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
  },
  {
    title: '状态',
    dataIndex: 'status',
  },
]
// 题目提交结果数组
const questionRes = ref([])
/**
 * 查看题目提交结果
 */
const searchRes = async () => {
  const res = await searchSubmitRes(searchSubmitForm.value)
  if (res.data.code === 0) {
    message.success('查询成功')
    loading.value = false
    questionRes.value = res.data.data.records
    console.log(questionRes.value)
  }else {
    message.success('查询失败:' + res.data.message)
  }
}
const size = ref(0.5)
const changeCode = (value: string) => {
  form.value.code = value
}
onMounted(() => {
  loadData()
  getCommentById()
})
// ai回答结果
const aiRes = ref({
  processMessage: {},
  contentMessage: {}
})
const toAi = async (key: any) => {
  const res = await askToAi(form.value)
  if (res.data.code === 0){
    message.success('生成成功')
    console.log(res.data.data)
    aiRes.value.processMessage = res.data.data.processMessag
    aiRes.value.contentMessage = res.data.data.contentMessage
  }else {
    message.error('生成失败' + res.data.message)
  }
}
const comment = ref([])
// 获取题目评论
const getCommentById = async () => {
  const res = await getComment(questionId)
  comment.value = res.data.data
}
</script>

<template>
  <div id="doQuestion">
    <a-row :gutter="[24, 24]">
      <a-col :md="12" :xs="24">

        <a-tabs default-active-key="question" class="question-tabs" @tabChange="handleClick">
          <a-tab-pane key="question" title="题目">
            <a-card v-if="question">
              <a-descriptions title="判题条件"
              :column="{xs: 1, md: 2, lg: 3}">
                <a-descriptions-item label="时间限制">
<!--                  //{{question.judgeConfig.timeLimit ?? 0}}-->
                </a-descriptions-item>
                <a-descriptions-item label="内存限制">
<!--                  {{question.judgeConfig.memoryLimit ?? 0}}-->
                </a-descriptions-item>
                <a-descriptions-item label="堆栈限制">
<!--                  {{question.judgeConfig.stackLimit ?? 0}}-->
                </a-descriptions-item>
              </a-descriptions>
              <MdViewer :value="question.content || ' '"></MdViewer>
              <template #extra>
                <a-space warp style="margin-bottom: 0">
                  <a-tag v-for="(tag, index) of question.tags"
                         :key="index"
                         color="green">
                    {{tag}}
                  </a-tag>
                </a-space>
              </template>
            </a-card>
          </a-tab-pane>
          <a-tab-pane key="2" title="提交结果" >
            <span>0: 等待，1: 执行中，2: 成功，3: 失败</span>
            <a-table
              :columns="colums"
              :data="questionRes"
              row-class="common-row"
              :loading="loading"
              :pagination="{
        showTotal: true,
      }"
            >
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="3" title="评论">
            <div class="flex flex-wrap gap-4">
              <el-card
                style="width: 480px;"
                shadow="always"
                v-for="(item, index) in comment"
              >
                <strong>用户id：{{ item.userId }}<br><br></strong>
                {{ item.comment }}<br><br>
              </el-card>
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" title="题解">
           {{question.answer}}
          </a-tab-pane>
          <a-tab-pane key="5">
            <template #title>
              <icon-user/> 答案
            </template>
            暂时无法查看答案
          </a-tab-pane>
          <a-tab-pane key="6">
            <template #title>
              <icon-user/> 使用DeepSeek-R1
            </template>
            <MdViewer :value="aiRes.contentMessage || ' 请稍候，正在生成中~ '"></MdViewer>
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :md="12" :xs="24" class="right-panel">
        <div class="code-section">
          <a-space size="large" class="language-selector">
            <a-select
              :style="{width:'320px'}"
              v-model="form.language"
              placeholder="请选择编程语言"
              allow-clear
            >
              <a-option>java</a-option>
              <a-option>cpp</a-option>
              <a-option>c</a-option>
            </a-select>
          </a-space>
          <div class="editor-wrapper">
            <CodeEditor :value="form.code" :language="form.language" :handle-change="changeCode"/>
          </div>
          <a-button type="primary" class="submit-btn" @click="doSubmit">
            提交代码
          </a-button>
          <a-button type="primary" class="submit-btn" @click="searchRes">
            查看提交结果
          </a-button>
          <a-button type="primary" class="submit-btn" @click="toAi">
            让DeepSeek来分析我的代码
          </a-button>
        </div>
      </a-col>

    </a-row>
  </div>
</template>

<style scoped lang="less">
#doQuestion {
  /* 修复导航栏遮挡关键设置 */
  padding: 72px 24px 24px; /* 顶部留出导航栏空间 */
  min-height: 100vh;
  background: #f8f9fa;
  box-sizing: border-box; /* 确保padding包含在高度内 */

  .main-row {
    height: calc(100vh - 96px); /* 计算可视高度 */
  }

  .left-panel {
    height: 100%;
    overflow-y: auto;
    padding-right: 12px;

    .question-tabs {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

      :deep(.arco-tabs-content) {
        padding: 0 16px;
      }

      .arco-card {
        border-radius: 8px;
        box-shadow: none;

        :deep(.arco-card-body) {
          padding: 16px;
        }

        .arco-descriptions {
          margin: 16px 0;

          &-title {
            font-size: 16px;
            color: #1d2129;
          }

          &-item-label {
            color: #86909c;
          }
        }

        .arco-space {
          margin-top: 12px;

          .arco-tag {
            border-radius: 4px;
            font-size: 12px;
            padding: 2px 8px;
          }
        }
      }
    }
  }

  .right-panel {
    height: 100%;

    .code-section {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      height: 100%;
      display: flex;
      flex-direction: column;

      .language-selector {
        padding: 16px;
        border-bottom: 1px solid #e5e6eb;
      }

      .editor-wrapper {
        flex: 1;
        min-height: 400px;
        border-radius: 0 0 8px 8px;
        overflow: hidden;
      }

      .submit-btn {
        margin: 16px;
        align-self: flex-end;
        padding: 0 32px;
        height: 40px;
        border-radius: 4px;
        transition: all 0.2s;

        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
      }
    }
  }

  @media (max-width: 768px) {
    padding: 88px 12px 12px; /* 移动端加大顶部padding */

    .main-row {
      height: calc(100vh - 100px); /* 移动端高度调整 */

      .left-panel {
        padding-right: 0;
        height: auto;
      }

      .right-panel {
        margin-top: 24px;
        height: calc(60vh - 48px); /* 移动端动态高度 */
      }
    }
  }
}
</style>
